import React, { useState } from 'react';
import { Card, Row, Col, ConfigProvider, Collapse, Tooltip } from 'antd';
import GradeComparison from './components/GradeComparison';
import GPAComparison from './components/GPAComparison';
import MutiClassGPA from './components/MutiClassGPA';
import BestComparison from './components/BestComparison';
import MajorComparison from './components/MajorComparison';
import styles from './index.less';
const { Panel } = Collapse;
interface DataType {
  key: string;
  id: string; //序号
  name: string;
  stuId: string;
  teacher: string;
  avgScore: number;
  avgGPA: number;
  weightScore: number;
  rank: number;
}

const data: DataType[] = [
  {
    key: '1',
    id: '1',
    name: '小明',
    stuId: '12333',
    teacher: 'djdj',
    avgScore: 12,
    avgGPA: 23,
    weightScore: 22,
    rank: 1,
  },
];

const ScoreAnalysis: React.FC<any> = () => {
  return (
    <div>
      {/* 第一行 */}
      <Card
        title={
          <span style={{ fontWeight: 'bold', fontSize: 18 }}>
            班级间综合对比
          </span>
        }
      >
        <Row gutter={8}>
          <Col span={24}>
            <Collapse>
              <Panel
                header={
                  <Tooltip title="对比同年级各班级专业排名情况">
                    <div>班级间专业排名对比</div>
                  </Tooltip>
                }
              >
                <ConfigProvider>
                  <GradeComparison />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
        </Row>
      </Card>
      {/* 第二行 */}
      <Card>
        <Row gutter={8}>
          <Col span={12}>
            <Collapse>
              <Panel
                header={
                  <Tooltip title="对比同年级各班级学分情况">
                    <div>班级间学分对比</div>
                  </Tooltip>
                }
              >
                <ConfigProvider>
                  <BestComparison />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
          <Col span={12}>
            <Collapse>
              <Panel
                header={
                  <Tooltip title="对比同年级各班级绩点情况">
                    <div>班级间绩点对比</div>
                  </Tooltip>
                }
              >
                <ConfigProvider>
                  <BestComparison />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
        </Row>
      </Card>
      {/* 第三行 */}
      <Card>
        <Row gutter={8}>
          <Col span={12}>
            <Collapse>
              <Panel
                header={
                  <Tooltip title="对比育人团队内各班级学分情况">
                    <div>历届班级学分纵向对比</div>
                  </Tooltip>
                }
              >
                <ConfigProvider>
                  <GPAComparison />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
          <Col span={12}>
            <Collapse>
              <Panel
                header={
                  <Tooltip title="对比育人团队内各班级绩点情况">
                    <div>历届班级绩点纵向对比</div>
                  </Tooltip>
                }
              >
                <ConfigProvider>
                  <GPAComparison />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
        </Row>
      </Card>
      {/* 第四行 */}
      <Card>
        <Row gutter={8}>
          <Col span={12}>
            <Collapse>
              <Panel
                header={
                  <Tooltip title="查看目前同班号班级学分现状及对比">
                    <div>本年度历届班级学分发展情况</div>
                  </Tooltip>
                }
              >
                <ConfigProvider>
                  <MutiClassGPA />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
          <Col span={12}>
            <Collapse>
              <Panel
                header={
                  <Tooltip title="查看目前同班号班级绩点现状及对比">
                    <div>本年度历届班级绩点发展情况</div>
                  </Tooltip>
                }
              >
                <ConfigProvider>
                  <MutiClassGPA />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
        </Row>
      </Card>
    </div>
  );
};
export default ScoreAnalysis;
